<template>
  <div>
    <mt-field placeholder="请输入想说的话" type="textarea" rows="5" v-model="item.text"></mt-field>
    <div>
      <div class="audio-item">
        <div style="width: 33.333%;">
          <span class="audio-time" v-if="index !== items.length - 1">
            <span @click="show = !show;">{{item.time}} 秒 <span class="iconfont icon-xiangyou"></span></span>
            <span class="audio-mask" v-if="show" @click.stop="show = false;"></span>
            <span :class="['audio-wrapper', show ? 'audio-drop' : 'audio-up']">
              <span v-for="time in times" :key="time" @click="confirm(time)">{{time}}</span>
            </span>
          </span>
        </div>
        <div style="width: 66.6%;text-align: right;" @click="showVoices = true;" v-if="!index">
          <span style="width: 10%;text-align: center;font-size: 14px;color: #9e9e9e;margin-top: 4px;">已选声音</span>
          <button class="choose-button-small" style="line-height: 35px;width: 50%;">{{item.name}} <span class="iconfont icon-xiangyou" style="color:#63A1F8;font-size: 13px;line-height: 35px;"></span></button>
        </div>
      </div>
    </div>

    <PickVoice @close="showVoices = false;" @confirm="selectOne" :pojos="pojos" v-if="showVoices"></PickVoice>
  </div>
</template>
<script>
import '../../../assets/font/iconfont/iconfont.css'
import DropUp from '../../../components/DropUp'
import PickVoice from './PickVoice'

export default {
  props: {
    pojos: Array,
    item: Object,
    items: Array,
    index: Number
  },
  data () {
    return {
      times: new Array(5).fill(0).map((v, i) => i + 1),
      show: false,
      showVoices: false
    }
  },
  methods: {
    confirm (index) {
      this.item.time = index
      this.show = false
    },
    selectOne (pojo) {
      this.item.name = pojo.name
      this.item.pojoId = pojo.id
      this.showVoices = false
      this.$emit('selectOne', pojo)
    }
  },
  components: {
    PickVoice,
    DropUp
  }
}
</script>
<style lang="less" scoped rel="stylesheet/less">
  .header {
    clear: both;
    box-sizing: border-box;
  }
  .audio-item {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 15px 0 20px;
  }
  .choose-button-small {
    background: -webkit-linear-gradient(left, #20BDFF , #7F00FF); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #20BDFF , #7F00FF); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #20BDFF , #7F00FF); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #20BDFF , #7F00FF); /* 标准的语法 */
    border-radius:6px;/*适配所有浏览器*/
    transition: box-shadow .3s;
    border: 1px solid #C6C4C4;
    outline: none;
    font-size: 16px;
    color: #fff;
    white-space: nowrap;
  }
  .add-audio-item {
    margin-top: 15px;
    margin-bottom: 20px;
  }
  .add-audio-item-button {
    color: #727AF6;
  }
  .preview-button {
    background: #707FF6;
    border-radius:6px;/*适配所有浏览器*/
    transition: box-shadow .3s;
    border: 0px;
    outline: none;
    font-size: 16px;
    color: #fff;
    height: 45px;
    width: 100%;
  }

  .audio-time {
    position: relative;
    display: inline-block;
    width: 40px;
    padding: 3px 10px;
    font-size: 12px;
    border-radius: 5px;
    text-align: right;
    background-color: #fff!important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .2);

    > span {
      line-height: 18px;

      > span {
        font-size: 12px;
      }
    }
  }

  .audio-wrapper {
    position: absolute;
    width: 100%;
    top: 28px;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 10;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
    border-radius: 5px;
    transition: all .3s ease;
    transform: scaleY(1);
    transform-origin: top;

    > span {
      display: block;
      text-align: center;
      padding: 3px;
    }
  }

  .audio-mask {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0);
  }

  .audio-down {
    transform: scaleY(1);
  }

  .audio-up {
    transform: scaleY(0);
  }
</style>
